<template>
  <div>
      <el-dialog title="员工导入" width="30%" :visible.sync="perFlag">
        <div style="display: flex;justify-content: center;">
            <el-upload
              class="upload-demo"
              drag
              accept=".xlsx,.xls"
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :on-success="handleSuccess"
              :on-change="handleChange" >
              <i class="el-icon-upload"></i>        
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div style="margin:10px 0;" slot="tip">
                  <el-link type="primary" @click="toDownLoad">下载导入模版</el-link>
              </div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
          <template #footer>
            <div>
                <el-button @click="perFlag=false">取消</el-button>
            </div>
          </template>
      </el-dialog>
  </div>
</template>

<script>
import {getExportTemplate,importUser} from '@/api/personnel'

import { saveAs } from 'file-saver'
export default {
  name: 'ExcelCtrl',

  data() {
    return {
      perFlag:false
    };
  },

  mounted() {
    
  },

  methods: {
   async  toDownLoad(){ //下载文件接口
      let res=await getExportTemplate()
      console.log(res,"-------blob 对象")
      saveAs(res,'员工导入模版.xlsx')
    },
   async handleChange(file){ //文件上传change事件
      // file.raw  element-ui的文件对象 内容
        console.log(file.raw,'---------file文件')
      
        // 要传送的内容 要放置在formdata对象内
        let formdata=new FormData();
        formdata.append("file",file.raw)
        
        let res=await importUser(formdata)
        console.log(res,"--------------")
        this.perFlag=false;
    },
    handleSuccess(){

    }
  },
};
</script>